<template>
  <div class="container">
    <div class="title">
      <div v-if="screen=='pc'">
        pc端
      </div>
      <div v-if="screen=='ipad'">
        ipad端
      </div>
      <div v-if="screen=='mobile'">
        mobile端
      </div>
    </div>
    <div :class="screenName"></div>
  </div>
</template>
<script>
import { screenFn , DEVICE_TYPE } from '@/utils/screen'
export default {
  data() {
    return {
      screen:"pc",
      screenName:"pc"
    };
  },
  methods: {

  },
  mounted: function() {
    // 媒体查询
    screenFn(deviceType => {
      console.log(deviceType)
      switch (deviceType) {
        case DEVICE_TYPE.DESKTOP:
          console.log(DEVICE_TYPE.DESKTOP)
          this.screen = "pc"
          this.screenName = "pc"
          break
        case DEVICE_TYPE.TABLET:
          console.log(DEVICE_TYPE.TABLET)
          this.screen = "ipad"
          this.screenName = "ipad"
          break
        case DEVICE_TYPE.MOBILE:
        default:
          console.log(DEVICE_TYPE.MOBILE)
          this.screen = "mobile"
          this.screenName = "mobile"
          break
      }
    })
    // console.log(this.$router.options.routes);
    // console.log(this.$route.matched)
  }
};
</script>

<style scoped lang="scss">
// 媒体查询响应式
.title{
  text-align: center;
}
.pc{
  width: 800px;
  background: chartreuse;
  height: 800px;
  margin: auto;
}
.ipad{
  width: 400px;
  background: yellow;
  height: 400px;
  margin: auto;
}
.mobile{
  width: 200px;
  background: blue;
  height: 200px;
  margin: auto;
}
</style>
